<template>
  <div class="time-quantum-item">
    <el-time-select
      v-model="timePoint"
      start="00:00"
      end="23:30"
      step="00:30"
      format="hh:mm"
      placeholder="请选择时间"
      @change="timeChange"
    />
    &nbsp;
    &nbsp;
    <el-icon class="del-icon" @click="del" v-if="props.isDel"><Delete /></el-icon>
  </div>
</template>
<script lang="ts" setup>
  import { ref, reactive, watch, computed, nextTick, onMounted } from 'vue'

  let timePoint = ref<string>('')

  type Props = {
    modelValue: string,
    isDel: boolean
  }
  const props = withDefaults(defineProps<Props>(), {
    modelValue: '',
    isDel: false
  })

  const emit = defineEmits(['update:modelValue', 'change', 'del'])

  const timeChange = (val:any)=>{
    emit('update:modelValue', val)
    emit('change', true)
  }

  const del = ()=>{
    emit('del', true)
  }

  const init = ()=>{
    if(!!props.modelValue){
      timePoint.value = props.modelValue
    }
  }

  onMounted(()=>{
    init()
  })

</script>
<style scoped lang="scss">
  .time-quantum-item{
    display: flex;
    align-items: center;
    .del-icon{
      font-size: 18px;
      color: #999;
      &:hover{
        cursor: pointer;
        color: #FF6B00;
      }
    }
  }
</style>
